<template>
	<view class="view" v-if="Ok">
		<view class="avatar-box">
			<p class="title">个人头像</p>
			<!-- #ifdef APP-PLUS -->
			<button @click='btnChooseImage()'>
				<image class="avatar" :src="userInfo.avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image>
			</button>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<button open-type="chooseAvatar" @chooseavatar='chooseAvatar'>
				<image class="avatar" :src="userInfo.avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image>
			</button>
			<!-- #endif -->
		</view>
		<view class="avatar-box" @click="showPopup(userInfo.nickName || '', '昵称')">
			<p class="title">昵称</p>
			<view class="title-left">
				<text>{{ userInfo.nickName || '默认用户' }}</text>
				<uni-icons type="arrowright" class="avatar"></uni-icons>
			</view>
		</view>
		<view class="avatar-box">
			<p class="title">账号</p>
			<p class="avatar">{{ phone }}</p>
		</view>
		<view class="avatar-box" @click="showPopup(userInfo.parentId, '邀请人')">
			<p class="title">邀请人</p>
			<view class="title-left">
				<text>{{ userInfo.parentId ? '已绑定' : '立即绑定' }}</text>
				<uni-icons type="arrowright" class="avatar"></uni-icons>
			</view>
		</view>
		<view class="avatar-box" @click="showPopup(userInfo.signature || '', '个性签名')">
			<p class="title">个性签名</p>
			<view class="title-left">
				<text>{{ userInfo.signature || '' }}</text>
				<uni-icons type="arrowright" class="avatar"></uni-icons>
			</view>
		</view>
		<!-- 弹窗 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close"
				@confirm="confirm" :title="title" :value="nowValue"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getUserInfo,
		policy
	} from '@/apis/request.js';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog';

	export default {
		components: {
			uniPopupDialog
		},
		data() {
			return {
				Ok: false,
				showBox: false,
				type: 0,
				input: '',
				phone: '',
				nowValue: '', //输入框的值
				title: '', //输入框的标题
				params: null, // 图片上传参数
				userInfo: null,
				editParams: {} //修改用户信息参数
			};
		},
		async onLoad() {
			//性能优化
			Object.assign(this, this.$options.data());
			this.getpolicy();
			//同步加载
			await this.getApiUserInfo();
		},
		methods: {
			// 获取上传参数
			async getpolicy() {
				this.params = await policy();
			},
			// 获取用户信息
			async getApiUserInfo() {
				this.userInfo = await getUserInfo({});
				let bef = String(this.userInfo.phone).substr(0, 3);
				let aft = String(this.userInfo.phone).substr(7, 4);
				this.phone = bef + '****' + aft;
				this.Ok = true;
			},
			//显示对话框
			showPopup(val, title) {
				if (title == '邀请人' && val) {
					return;
				}
				this.nowValue = val;
				this.title = title;
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			confirm(value, newVal) {
				if (this.title == '个性签名') {
					this.editParams['signature'] = newVal;
					this.btnSave();
				} else if (this.title == '昵称') {
					this.editParams['nickName'] = newVal;
					this.btnSave();
				} else if (this.title == '邀请人') {
					this.bindInviter(newVal);
				}
				this.$refs.popup.close();
			},
			// 修改用户信息
			btnSave() {
				let that = this;
				this.editParams['userId'] = this.userInfo.id;
				this.$api.http(
					'/user/medicalUser/updateUserInfo',
					'POST',
					this.editParams,
					res => {
						uni.setStorageSync('mineUpdate', true);
						uni.showToast({
							title: '修改',
							icon: '',
							duration: 1000
						});
						that.getApiUserInfo();
					},
					err => {}
				);
			},
			/**
			 * 微信小程序选择头像的返回回调
			 * @param {Object} e 选择的头像信息
			 */
			chooseAvatar(e) {
				this.uploadimage(e.detail.avatarUrl);
			},
			// 选择图片
			btnChooseImage() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: 'original',
					sourceType: ['camera', 'album'],
					success(res) {
						that.uploadimage(res.tempFilePaths[0]);
					}
				});
			},
			// 图片上传
			uploadimage(file) {
				let that = this;
				let {
					host,
					dir,
					accessKeyId,
					policy,
					signature
				} = this.params;
				const aliyunFileKey = dir + '/' + Math.floor(Math.random() * 150) + '.png';
				const formParam = {
					key: aliyunFileKey,
					policy: policy,
					OSSAccessKeyId: accessKeyId,
					signature: signature,
					success_action_status: '200'
				};
				uni.uploadFile({
					url: host, //仅为示例，非真实的接口地址
					filePath: file,
					name: 'file',
					formData: formParam,
					success: res => {
						if (res.statusCode != 200) {
							this.$Toast(`上传出错${JSON.stringify(res)}`);
							return;
						}
						this.editParams['avatar'] = host + '/' + aliyunFileKey;
						//上传完成
						that.btnSave();
						uni.hideLoading();
						uni.showToast({
							title: '图片上传完成',
							icon: 'none',
							duration: 2000
						});
					},
					fail: err => {
						// 图片上传失败
						uni.hideLoading();
						uni.showToast({
							title: '上传失败，请重试',
							icon: 'none',
							duration: 1500
						});
					}
				});
			},
			bindInviter(invitationCode) {
				this.$api.http(
					'/user/medicalUser/bindInviter',
					'GET', {
						invitationCode
					},
					res => {
						if (res.data.code == 2015) {
							uni.showToast({
								title: '您已存在上级或下级',
								icon: 'none',
								duration: 2000
							});
						}
						this.getApiUserInfo();
					}
				);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.view {
		position: fixed;
		width: 100%;
		background-color: #f1efef;

		.avatar-box {
			padding: 30rpx;
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: space-between;
			background-color: #fff;
			border-bottom: 1rpx solid #f8f8f8;

			.title {
				font-size: 28rpx;
			}

			button {
				margin-left: auto;
				margin-right: 0;
				padding: 0;
				width: 88rpx;
				height: 88rpx;
				border-radius: 100%;
				box-shadow: 0 0 10upx #999999;
			}

			button::after {
				border: none;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>